import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Compact TextField',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Compact TextField')),
        body: const Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              // 默认样式的TextField，仅底部有边框
              TextField(
                decoration: InputDecoration(hintText: '默认样式的TextField'),
              ),

              Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),

              // 边框为OutlineInputBorder样式的TextField，四周有边框
              TextField(
                decoration: InputDecoration(
                  hintText: '默认样式的TextField',
                  border: OutlineInputBorder(),
                ),
              ),

              Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),

              TextField(
                // decoration: InputDecoration.collapsed(
                //   hintText: '收缩的TextField',
                //   border: OutlineInputBorder(),
                // ),

                decoration: InputDecoration(
                  labelText: '身高',
                  hintText: '默认样式的TextField',
                  isDense: true,
                  isCollapsed: true,
                  contentPadding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 6.0),
                  suffixText: 'cm',
                  border: OutlineInputBorder(),
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
